/* eslint-disable @typescript-eslint/no-var-requires */
import React from 'react';

import styles from './index.module.less';
import AuthNav from './components/auth-nav';
import TodoList from './components/todo-list';

import FooterNav from '@/components/footer-nav';
import { useSelector } from 'react-redux';

import { getMyTaskListApi, getMyProcessList } from '@/services/approval';
const BANNER_IMG = require('@/assets/images/banner.png');

const Home: React.FC<any> = (props) => {
  const { common } = useSelector((state: any) => ({
    common: state.common
  }));
  return (
    <div className={styles['container']}>
      <div className={styles['main']}>
        <div className={styles['linear-bg']}>
          <div className={styles['banner-wrap']}>
            <img className={styles['banner']} src={BANNER_IMG} />
          </div>
          <AuthNav menu={common.userMenu} />
        </div>
        <TodoList
          {...props}
          title='我的待办'
          emptyData='暂无待办'
          hasButton
          withStatus
          requestList={getMyTaskListApi}
        />
        <TodoList
          {...props}
          title='我发起的'
          emptyData='暂无申报'
          withStatus
          requestList={getMyProcessList}
          isMyApply='1'
        />
      </div>
      <FooterNav {...props} />
    </div>
  );
};

export default Home;
